import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  TextInput,
  LayoutAnimation,
  Keyboard
} from 'react-native'
import React, { useMemo, useState } from 'react'
import AgreementLink from './components/AgreementLink'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { reqLogin } from '@/api/login'
import { userStore } from '@/store/user'
import Toast from 'react-native-root-toast'

import icon_close_modal from '@/assets/images/icon_close_modal.png'
import icon_triangle from '@/assets/images/icon_triangle.png'
import icon_eye_open from '@/assets/images/icon_eye_open.png'
import icon_eye_close from '@/assets/images/icon_eye_close.png'
import icon_exchange from '@/assets/images/icon_exchange.png'
import icon_wx from '@/assets/images/icon_wx.png'
import icon_qq from '@/assets/images/icon_qq.webp'

interface Props {
  /** 切换登录类型 */
  onChangeLoginType: (type: 'fast' | 'input') => void
  children?: React.ReactNode
}

const InputLogin: React.FC<Props> = ({ onChangeLoginType }) => {
  const navigation = useNavigation<StackNavigationProp<any>>()
  // 控制密码的显示
  const [pwdShow, setPwdShow] = useState(true)
  // 关闭按钮的回调
  const onClosePage = () => {
    // 通知父组件切换登录类型
    onChangeLoginType('fast')
    LayoutAnimation.easeInEaseOut()
  }

  // 手机号
  const [phone, setPhone] = useState('18751609896')
  // 密码
  const [pwd, setPwd] = useState('123456')
  // 获取用户协议实例是否勾选
  const [selected, setSelected] = useState(false)
  const onChangeSelected = (state: boolean) => {
    setSelected(state)
  }
  // 计算是否可登录
  const finishLogin = useMemo(() => {
    return phone && pwd && selected ? true : false
  }, [phone, pwd, selected])

  // 点击登录的回调
  const login = async () => {
    // 隐藏键盘
    Keyboard.dismiss()
    if (finishLogin) {
      const res = await reqLogin({ name: phone, pwd })
      if (res.redBookId) {
        // 登录成功
        // 存储登录信息
        userStore.saveUserInfo(res)
        // 跳转到首页
        navigation.replace('MyTabbar')
      } else if (!res.redBookId) {
        Toast.show('用户名或密码错误', {
          shadow: false,
          position: Toast.positions.CENTER
        })
      }
    }
  }

  return (
    <View style={styles.root}>
      <TouchableOpacity style={styles.closeBtn} activeOpacity={0.7} onPress={onClosePage}>
        <Image source={icon_close_modal} style={styles.closeIcon}></Image>
      </TouchableOpacity>
      <Text style={styles.pwdTxt}>密码登录</Text>
      <Text style={styles.tipTxt}>未注册的手机号登录成功后将自动注册</Text>
      {/* 手机号 */}
      <View style={styles.phoneBox}>
        <TouchableOpacity style={styles.prefixBtn} activeOpacity={0.7}>
          <Text style={styles.prefixPhone}>+86</Text>
          <Image source={icon_triangle} style={styles.triangleIcon}></Image>
        </TouchableOpacity>
        <TextInput
          style={styles.phoneInput}
          placeholder="请输入手机号码"
          keyboardType="number-pad"
          placeholderTextColor="#cecece"
          maxLength={11}
          selectionColor="#a7a7a7"
          value={phone}
          onChangeText={text => setPhone(text.trim())}
        ></TextInput>
      </View>
      {/* 密码 */}
      <View style={[styles.phoneBox, styles.pwdBox]}>
        <TextInput
          style={[styles.phoneInput, styles.pwdInput]}
          placeholder="输入密码"
          placeholderTextColor="#cecece"
          selectionColor="#a7a7a7"
          secureTextEntry={pwdShow}
          maxLength={16}
          value={pwd}
          onChangeText={text => setPwd(text.trim())}
        ></TextInput>
        <TouchableOpacity onPress={() => setPwdShow(!pwdShow)} activeOpacity={0.7}>
          <Image
            source={pwdShow ? icon_eye_close : icon_eye_open}
            style={styles.eyeCloseIcon}
          ></Image>
        </TouchableOpacity>
      </View>
      <View style={styles.otherRow}>
        <TouchableOpacity style={styles.codeBox} activeOpacity={0.7}>
          <Image source={icon_exchange} style={styles.exchangeIcon}></Image>
          <Text style={styles.codeTxt}>验证码登录</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7}>
          <Text style={styles.forgetPwdTxt}>忘记密码？</Text>
        </TouchableOpacity>
      </View>
      <TouchableOpacity
        style={[styles.loginBtn, { backgroundColor: finishLogin ? '#f92845' : '#d8d8d8' }]}
        onPress={login}
        disabled={!finishLogin}
      >
        <Text style={styles.loginBtnTxt}>登录</Text>
      </TouchableOpacity>
      {/* 用户协议 */}
      <AgreementLink onSelected={onChangeSelected}></AgreementLink>
      <View style={styles.qqOrWxLogin}>
        <TouchableOpacity activeOpacity={0.7}>
          <Image source={icon_wx} style={styles.qqOrWxIcon}></Image>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.7}>
          <Image source={icon_qq} style={styles.qqOrWxIcon}></Image>
        </TouchableOpacity>
      </View>
    </View>
  )
}

export default InputLogin

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    paddingHorizontal: 46,
    alignItems: 'center'
  },
  closeBtn: {
    position: 'absolute',
    top: 12,
    left: 40
  },
  closeIcon: {
    width: 32,
    height: 32
  },
  pwdTxt: {
    marginTop: 42,
    color: '#343434',
    fontSize: 28,
    fontWeight: 'bold'
  },
  tipTxt: {
    fontSize: 14,
    color: '#dddddd',
    marginTop: 8
  },
  phoneBox: {
    width: '100%',
    flexDirection: 'row',
    borderBottomColor: '#ededed',
    borderBottomWidth: 1,
    alignItems: 'center',
    marginTop: 24
  },
  prefixBtn: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  prefixPhone: {
    color: '#949494',
    fontSize: 24
  },
  triangleIcon: {
    width: 14,
    height: 6,
    resizeMode: 'contain',
    tintColor: '#a7a7a7',
    marginLeft: 5
  },
  phoneInput: {
    fontSize: 24,
    paddingLeft: 18
  },
  pwdBox: {
    justifyContent: 'space-between',
    marginTop: 10
  },
  eyeCloseIcon: {
    width: 26,
    height: 26,
    marginRight: 5,
    tintColor: '#5c5c5c'
  },
  pwdInput: {
    paddingLeft: 0
  },
  otherRow: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 20
  },
  codeBox: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  exchangeIcon: {
    width: 22,
    height: 22
  },
  codeTxt: {
    color: '#2d4063',
    fontSize: 14,
    marginLeft: 3
  },
  forgetPwdTxt: {
    color: '#2d4063',
    fontSize: 14
  },
  loginBtn: {
    width: '100%',
    height: 58,
    backgroundColor: '#f92845',
    borderRadius: 29,
    marginTop: 25,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 32
  },
  loginBtnTxt: {
    color: '#fff',
    fontSize: 22
  },
  qqOrWxLogin: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 42,
    marginTop: 48
  },
  qqOrWxIcon: {
    width: 48,
    height: 48
  }
})
